<template>
  <div class="page-main" v-title data-title="孵化项目列表">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>孵化项目列表</span></div>
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :xl="{ span: 14 }" :lg="{ span: 11 }">
            <a-button class="hte-btn add-btn" type="primary" icon="plus" @click="addHatchProject">创建</a-button>
            <!-- <a-button
              v-if="checkPermission(['WORK_REPORT_MANAGER', 'WORK_REPORT_ACCEPTER'])"
              class="hte-btn port-btn"
              @click="exportExcle"
              >导出</a-button
            > -->
            <a-button class="hte-btn port-btn" @click="toDelOk">删除</a-button>
            <a-button class="hte-btn port-btn" @click="toTerminate">终止</a-button>
          </a-col>
          <a-col :xl="{ span: 9 }" :lg="{ span: 13 }" class="input-ground">
            <a-input-group compact>
              <a-select v-model="keywordType">
                <a-select-option value="1"> 孵化编号 </a-select-option>
                <a-select-option value="2"> 孵化名称 </a-select-option>
              </a-select>
              <a-input-search v-model="keyword" @search="handleSearch" placeholder="请按照关键字进行搜索" />
            </a-input-group>
            <a-button class="hte-btn del-btn" @click="openSearchForm" :loading="tableLoading">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>
      <a-tooltip :visible="showTip">
        <template slot="title">需要协助</template>
        <a-table
          class="hte-table-content"
          :row-selection="rowSelection"
          :columns="columns"
          :data-source="listData"
          bordered
          size="middle"
          :rowKey="(record) => record.id"
          :loading="tableLoading"
          :pagination="ipagination"
          @change="handleTableChange"
          :rowClassName="tableRowClass"
          :customRow="customRow"
        >
          <template slot="status" slot-scope="text">
            {{ initStatusText(text) }}
          </template>
          <template slot="hatchProjectNo" slot-scope="text, record">
            <span style="color: blue;cursor: pointer;" @click="gotoDetail(record)">{{ text }}</span>
          </template>
          <template slot="action" slot-scope="text, record">
            {{ record.projectBuildNo ? `已关联:${record.projectBuildNo}` : '未关联立项' }}
          </template>
        </a-table>
      </a-tooltip>
    </div>

    <a-modal
      :visible="showSearchForm"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级查询"
      cancelText="清空"
      @ok="handleSearch"
      @cancel="handleToCancel"
    >
      <a-form-model ref="ruleForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="状态">
              <a-select v-model="status">
                <a-select-option value="1"> 创建中 </a-select-option>
                <a-select-option value="2"> 待审批 </a-select-option>
                <a-select-option value="3"> 审批通过 </a-select-option>
                <a-select-option value="4"> 审批不通过 </a-select-option>
                <a-select-option value="5"> 已终止 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目孵化编号">
              <a-input v-model="hatchProjectNo" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目孵化名称">
              <a-input v-model="hatchProjectName" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="项目成功类型">
              <a-input v-model="mgTypeName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目合作方式">
              <a-input v-model="cooperationTypeName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否自主寻找外部合作单位" title="是否自主寻找外部合作单位">
              <a-radio-group v-model="applyCountryCode">
                <a-radio value="是"> 是</a-radio>
                <a-radio value="否"> 否</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <a-modal
      title="孵化项目终止"
      :visible="showTermination"
      @ok="handleTermination"
      @cancel="showTermination = false"
      width="40vw"
      :destroyOnClose="true"
    >
      <a-form-model ref="terminationForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="项目终止说明">
              <a-textarea
                v-model="terminationMemo"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                placeholder="记录项目终止原因及相关情况说明，限500字。"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'HatchProjectIndex',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  mounted() {
    this.initData()
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows
          this.selectedRowKeys = selectedRowKeys
        },
        // getCheckboxProps: (record) => ({
        //   props: {
        //     disabled: record.status != '1',
        //   },
        // }),
      }
    },
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportList',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      keywordType: '1',
      keyword: '',
      columns: [
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          align: 'center',
          width: '50px',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '项目孵化编号',
          dataIndex: 'hatchProjectNo',
          key: 'hatchProjectNo',
          width: '8%',
          align: 'center',
          scopedSlots: { customRender: 'hatchProjectNo' },
        },
        {
          title: '项目孵化名称',
          dataIndex: 'hatchProjectName',
          key: 'hatchProjectName',
          align: 'center',
          width: '10%',
        },
        {
          title: '项目成果类型',
          dataIndex: 'mgTypeName',
          key: 'mgTypeName',
          align: 'center',
          width: '8%',
        },
        {
          title: '项目合作方式',
          dataIndex: 'cooperationTypeName',
          key: 'cooperationTypeName',
          align: 'center',
          width: '7%',
        },

        {
          title: '需求提出部门',
          dataIndex: 'demandDeptName',
          key: 'demandDeptName',
          align: 'center',
          width: '7%',
        },
        {
          title: '项目实施部门',
          dataIndex: 'landingDeptName',
          key: 'landingDeptName',
          align: 'center',
          width: '7%',
        },
        {
          title: '实施方负责人',
          dataIndex: 'projectLeaderName',
          key: 'projectLeaderName',
          align: 'center',
          width: '7%',
        },
        {
          title: '期望完成日期',
          dataIndex: 'hopeComletedDate',
          key: 'hopeComletedDate',
          align: 'center',
          width: '7%',
        },
        {
          title: '预算费用(万元)',
          dataIndex: 'budgetCost',
          key: 'budgetCost',
          align: 'center',
          width: '7%',
        },
        {
          title: '申请人',
          dataIndex: 'createRealName',
          key: 'createRealName',
          align: 'center',
        },
        {
          title: '申请时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center',
          width: '7%',
        },
        {
          title: '自主开发外部合作单位',
          dataIndex: 'applyCountryCode',
          key: 'applyCountryCode',
          align: 'center',
          width: '5%',
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          align: 'center',
          width: '100px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      listData: [],
      tableLoading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        hideOnSinglePage: false,
        total: 0,
      },
      showSearchForm: false,
      status: undefined,
      hatchProjectNo: '',
      hatchProjectName: '',
      mgTypeName: '',
      cooperationTypeName: '',
      selectedRowKeys: [],
      selectedRows: [],
      applyCountryCode: '',
      showTip: false,
      showTermination:false,
      terminationMemo:"",
    }
  },
  methods: {
    initData() {
      if (this.tableLoading) {
        return
      }
      this.selectedRows = [];
      this.selectedRowKeys = [];
      this.tableLoading = true;
      getAction('/hatchProject/mgListPage', {
        keyword: this.keyword,
        keywordType: this.keywordType,
        hatchProjectNo: this.hatchProjectNo,
        status: this.status,
        hatchProjectName: this.hatchProjectName,
        mgTypeName: this.mgTypeName,
        cooperationTypeName: this.cooperationTypeName,
        applyCountryCode: this.applyCountryCode,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      })
        .then((res) => {
          if (res.code === 200) {
            this.listData = res.result.records
            this.ipagination.total = res.result.total
          } else {
            this.$message.error(res.message)
            this.ipagination.total = 0
          }
          this.tableLoading = false
        })
        .catch((res) => {
          this.tableLoading = false
        })
    },
    addHatchProject(record) {
      let urlJump = this.$router.resolve({ path: `/hatchProjectBuildstep/baseInfo?projectClass=62&projectType=MG` })
      window.open(urlJump.href, '_blank')
    },
    openSearchForm() {
      if (this.tableLoading) {
        return
      }
      this.showSearchForm = true
    },
    handleToCancel() {
      this.showSearchForm = false
      this.status = undefined
      this.hatchProjectNo = ''
      this.hatchProjectName = ''
      this.mgTypeName = ''
      this.cooperationTypeName = ''
      this.applyCountryCode = ''
      this.ipagination.current = 1
      this.initData()
    },
    handleSearch() {
      this.showSearchForm = false
      if (this.tableLoading) {
        return
      }
      this.ipagination.current = 1
      this.initData()
    },
    handleTableChange(pagination, filters, sorter) {
      if (this.tableLoading) {
        return
      }
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.initData()
    },
    initStatusText(status) {
      switch (status) {
        case 1:
          return '创建中'
          break
        case 2:
          return '待审批'
          break
        case 3:
          return '审批通过'
          break
        case 4:
          return '审批不通过'
          break
        case 5:
          return '已终止'
          break
        default:
          return '待定'
      }
    },
    openUrl(record) {
      let urlJump = this.$router.resolve({ path: `/hatchApproval?hatchProjectBuildId=${record.id}` })
      window.open(urlJump.href, '_blank')
    },
    gotoDetail(record) {
      var currUserId = Vue.ls.get(USER_INFO).username
      var realname = Vue.ls.get(USER_INFO).realname
      let urlJump = {}
      if (
        (record.createUserName == currUserId ||
          (record.leaders && record.leaders.indexOf(realname) >= 0) ||
          (record.members && record.members.indexOf(realname) >= 0)) &&
        (record.status == '1'||record.status == '4')
      ) {
        urlJump = this.$router.resolve({
          path: `/hatchProjectBuildstep/baseInfo?projectClass=62&projectType=MG&hatchProjectBuildId=${record.id}`,
        })
      } else {
        urlJump = this.$router.resolve({ path: `/hatchApproval?hatchProjectBuildId=${record.id}` })
      }
      window.open(urlJump.href, '_blank')
    },
    toDelOk() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要删除的孵化项目')
        return;
      }
      let checkRows=this.selectedRows.filter(t=>{return t.status!=1});
      if(checkRows&&checkRows.length>0){
        this.$message.warning('状态为【创建中】的项目才可以删除');
        return;
      }

      postAction('/hatchProject/deleteBatch', this.selectedRowKeys)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('删除项目成功:' + res.message)
            this.initData()
          } else {
            this.$message.warning('删除项目失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('删除项目异常:' + res.message)
        })
    },
    toTerminate() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要终止的孵化项目')
        return;
      }
      let checkRows=this.selectedRows.filter(t=>{return t.status!=3});
      if(checkRows&&checkRows.length>0){
        this.$message.warning('状态为【审批通过】的项目才可以终止');
        return;
      }
      this.terminationMemo="";
      this.showTermination=true;
    },
    handleTermination(){
      if(this.terminationMemo.trim()==''){
        this.$message.warning('项目终止说明必填');
        return;
      }
      if(this.terminationMemo.trim().length>500){
        this.$message.warning('项目终止说明字数超过500字。');
        return;
      }
      postAction('/hatchProject/terminate', {ids:this.selectedRowKeys.join(","),terminationMemo:this.terminationMemo.trim()})
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('终止项目成功:' + res.message)
            this.initData();
            this.showTermination=false;
          } else {
            this.$message.warning('终止项目失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('终止项目异常:' + res.message)
        })
    },
    tableRowClass(record, index) {
      if (record.applyCountryCode == '否') {
        return 'rowClass'
      } else {
        return ''
      }
    },
    customRow(record, index) {
      return {
        on: {
          mouseenter: (event) => {
            if (record.applyCountryCode == '否') {
              this.showTip = true
            }
          },
          mouseleave: (event) => {
            this.showTip = false
          },
        },
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(../../assets/contract-top.png);
  }
  .container {
    /deep/ .ant-checkbox-group {
      width: 100%;
      display: initial;
    }
    /deep/ .ant-col .ant-checkbox {
      padding: 0 19px;
    }
    .hte-table-content {
      margin-top: 20px;
      span {
        &:hover {
          border-bottom: 1px solid blue;
          font-weight: bold;
        }
      }
    }
  }
  .icon-file {
    background-image: url('../../assets/file.png');
  }
  /deep/ .ant-btn > .anticon + span {
    margin-left: 3px;
  }
}
.font-active {
  cursor: pointer;
}

.iconfont-png {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 3px;
  background-repeat: no-repeat;
}
@media (max-width: 1170px) {
  .page-main .container section .list-content > div.flex-num1-box {
    flex-wrap: wrap;
    > div {
      &:nth-child(1),
      &:nth-child(2) {
        width: 48%;
      }
      &:nth-child(3) {
        width: 100%;
        justify-content: flex-start;
        > span {
          margin-right: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .page-main .container section .list-content > div.flex-num2-box {
    display: block;
    margin-top: 0;
  }
}
/deep/ .rowClass {
  background-color: #cae9fb;
  &:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background-color: #cae9fb;
  }
}
</style>